<template>
  <div class="header">
    <span @click="toggleMenu">=</span>
    <router-link to="/">LOGO</router-link>
    <router-link to="/page">文档</router-link>
  </div>
</template>
<script lang="ts">
import { defineComponent, inject, Ref } from "vue";

export default defineComponent({
  setup() {
    const menuVisible = inject<Ref<boolean>>("menuVisible");
    const toggleMenu = () => {
      menuVisible!.value = !menuVisible!.value;
    };
    return { toggleMenu, menuVisible };
  },
});
</script>

<style scoped lang="scss">
.header {
  line-height: 60px;
  background-color: cadetblue;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  span {
    display: none;
  }
  @media (max-width: 500px) {
    span {
      display: block;
    }
  }
}
</style>
